<!--生产商编辑-->
<template>
  <div class="editcontainer">
    <el-dialog
      :title="titleMap[edittitle]"
      :visible.sync="vis"
      @close="closeDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600px"
    >
      <el-scrollbar style="height: 100%;">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="口罩机名称" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="口罩生产商编号" prop="mask_manufacturer">
            <el-select v-model="ruleForm.mask_manufacturer">
              <el-option
                v-for="item in CusServicetype"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="口罩机型号" prop="mask_machine_model">
            <el-select v-model="ruleForm.mask_machine_model">
              <el-option
                v-for="item in kouzhaotype"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="网关编号" prop="gateway">
            <el-input v-model="ruleForm.gateway" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="	通道编号" prop="channel">
            <el-input v-model="ruleForm.channel" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="口罩机图片" prop="photo">
            <div class="uploadImgDiv">
              <!--上传图片接口  -->
              <el-upload
                :action=" `${this.$basePath}?service=App.MaskMachines.UploadFile&api=193`"
                list-type="picture-card"
                :data="dataparms"
                :on-remove="handleRemoveImg"
                :on-preview="handlePictureCardPreview"
                :limit="9"
                :multiple="isMultiple"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :on-exceed="handleExceed"
                :on-error="imgUploadError"
                :file-list="imgUrl"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
            </div>
          </el-form-item>
          <el-form-item label="口罩机视频" prop="video">
            <!--上传视频接口  -->
            <div class="maskvideo">
              <div class="videodiv" v-if="videoForm.Video !='' && videoFlag == false">
                <i class="el-icon-circle-close videoclose" @click="handleRemoveVideo"></i>
                <video :src="videoForm.Video" class="videoclass" controls="controls">您的浏览器不支持视频播放</video>
              </div>
              <el-upload
                v-else
                class="avatar-uploader"
                :action="`${this.$basePath}?service=App.MaskMachines.UploadFile&api=193`"
                :show-file-list="false"
                :on-success="handleVideoSuccess"
                :before-upload="beforeUploadVideo"
                :data="dataparms1"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>

              <P class="text">请保证视频格式正确，且不超过10M</P>
            </div>
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <button
          @click="submitForm('ruleForm')"
          class="dialogbutton confim"
          v-if="edittitle=='addData' "
        >确 定</button>
        <button @click="editForm('ruleForm')" class="dialogbutton confim" v-else>提 交</button>
        <button @click="cancle" class="dialogbutton calce">取 消</button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      token: state => state.Authorization
    })
  },
  data() {
    return {
      vis: false,
      CusServicetype: [],
      kouzhaotype: [],
      ruleForm: {
        name: "",
        mask_manufacturer: "",
        mask_machine_model: "",
        gateway: "",
        channel: "",
        photo: [],
        video: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入制造商名称", trigger: "blur" }
        ],
        mask_manufacturer: [
          { required: true, message: "请输入口罩生产商编号", trigger: "blur" }
        ],
        mask_machine_model: [
          { required: true, message: "口罩机型号", trigger: "blur" }
        ],
        gateway: [{ required: true, message: "网关编号", trigger: "blur" }],
        channel: [{ required: true, message: "通道编号", trigger: "blur" }],
        photo: [{ required: true, message: "口罩机图片", trigger: "blur" }],
        video: [{ required: true, message: "口罩机视频", trigger: "blur" }]
      },
      titleMap: {
        addData: "添加",
        updateData: "编辑"
      },
      //上传图片
      isMultiple: true,
      productImgs: [],
      dialogImageUrl: "",
      dialogVisible: false,
      dataparms: {},
      imgUrl: [],
      imgUrl1: [],

      //上传视频
      videoFlag: false,
      videoForm: {
        Video: ""
      },
      videoUploadPercent: "",
      dataparms1: {}
    };
  },
  props: {
    dialogFormVisible: Boolean,
    edittitle: String,
    roleform: Object
  },
  watch: {
    dialogFormVisible(newValue, oldValue) {
      this.vis = newValue;
    },
    roleform(newValue, oldValue) {
      this.ruleForm = newValue;
      if (this.edittitle == "updateData") {
        console.log(newValue.photo);
        this.imgUrl = JSON.parse(newValue.photo);
        this.imgUrl = this.imgUrl.map(item => {
          return {
            name: item,
            url: item
          };
        });
        console.log(this.imgUrl);
        if (newValue.video.length > 0) {
          console.log("视频");
          this.videoForm.Video = JSON.parse(newValue.video);
          console.log(this.videoForm.Video);
          this.videoFlag = false;
        }
      }
    }
  },
  mounted() {
    //传文件带的参数
    this.dataparms = {
      token: this.token,
      type: "image"
    };
    this.dataparms1 = {
      token: this.token,
      type: "video"
    };
    this.GetMaskMachineList();
    this.GetMaskmodelList();
  },
  methods: {
    //获取生产商编号
    GetMaskMachineList() {
      var params = {
        token: this.token
      };
      this.$http
        .get(
          `${this.$basePath}?service=App.MaskMachines.GetMaskMachineList&api=193`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("生产商id", res);
            this.CusServicetype = res.data;
          } else {
            console.log(res.msg);
          }
        });
    },
    //获取口罩机编号编号
    GetMaskmodelList() {
      var params = {
        token: this.token
      };
      this.$http
        .get(
          `${this.$basePath}?service=App.MaskMachineModels.GetClassifyList&api=193`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("生产商id", res);
            this.kouzhaotype = res.data;
          } else {
            console.log(res.msg);
          }
        });
    },
    cancle() {
      this.$emit("backtable");
    },
    //关闭弹框
    closeDialog() {
      this.$emit("backtable", true);
    },
    //添加
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit("chirldSave", this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //编辑
    editForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit("chirldEdit", this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /**上传图片 */
    handleRemoveImg(fileList) {
      var that = this;
      that.imgUrl.splice(that.imgUrl.indexOf(fileList.response.data.path), 1);
      console.log("移除");
      console.log(that.imgUrl);
      that.roleform.photo = that.imgUrl;
      console.log("photo", that.roleform.photo);
    },
    handlePictureCardPreview(file) {
      var that = this;
      console.log("预览图片");
      that.dialogImageUrl = file.url;
      that.dialogVisible = true;
    },

    beforeAvatarUpload(file) {
      var that = this;
      //文件上传之前调用做一些拦截限制
      console.log("上传前做限制", file);
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        that.$message.error("上传图片只能是 JPG 格式或PNG格式!");
        return false;
      }
      if (!isLt2M) {
        that.$message.error("上传图片大小不能超过 2MB!");
        return false;
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess(res, file) {
      var that = this;
      //图片上传成功
      console.log("上传成功");
      console.log(res);
      if (res.ret == 200) {
        that.imgUrl.push(res.data.path);
        console.log("图片数组：", that.imgUrl);
        that.roleform.photo = that.imgUrl.join(",");
        console.log("photo", that.roleform.photo);
      }
    },
    // handleAvatarSuccess(res, file) {
    //图片是要唯一编号
    //   var that = this;
    //   //图片上传成功
    //   console.log("上传成功");
    //   console.log(res);

    //   if (res.ret == 200) {

    //     that.imgUrl1.push(res.data.path);
    //      console.log("图片数组1：", that.imgUrl1);
    //     that.imgUrl = that.imgUrl1.map(item => {
    //       return {
    //         name: item,
    //         url: item
    //       };
    //     });
    //   }
    //   console.log("图片数组：", that.imgUrl);
    //   // that.roleform.photo = that.imgUrl;
    //   that.roleform.photo = that.imgUrl1.join(",");
    //   console.log("photo", that.roleform.photo);
    // },
    handleExceed(files) {
      var that = this;
      //图片上传超过数量限制
      that.$message.error("上传图片不能超过9张!");
      console.log(file);
    },
    imgUploadError(err, file) {
      var that = this;
      //图片上传失败调用
      console.log(err);
      that.$message.error("上传图片失败!");
    },

    /**上传视频 */
    handleRemoveVideo(fileList) {
      this.videoForm.Video = "";
      this.videoFlag = false;
    },

    beforeUploadVideo(file) {
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb"
        ].indexOf(file.type) == -1
      ) {
        this.$message.error("请上传正确的视频格式");
        return false;
      }
      if (!isLt10M) {
        this.$message.error("上传视频大小不能超过10MB哦!");
        return false;
      }
    },

    handleVideoSuccess(res, file) {
      //获取上传图片地址
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      if (res.ret == 200) {
        //this.videoForm.videoUploadId = res.data.uploadId;
        this.videoForm.Video = res.data.path;
        this.roleform.video = res.data.path;
      } else {
        this.$message.error("视频上传失败，请重新上传！");
      }
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.el-dialog,
/deep/ .el-pager li {
  background: url(../../../../static/image/dialog_top.png) no-repeat;
  background-size: 100%100%;
  // box-shadow: 0px 0px 25px 0px rgba(68, 140, 232, 0.7) inset;
  color: #fff;
}
/deep/ .el-dialog__body {
  height: 350px !important;
}
@import "../../../assets/css/dialog";
.uploadImgDiv {
  /deep/.el-upload--picture-card {
    width: 80px;
    height: 80px;
    line-height: 80px;
    background: transparent;
  }
  /deep/.el-upload-list--picture-card .el-upload-list__item {
    width: 80px;
    height: 80px;
    line-height: 80px;
  }
  /deep/.el-upload-list--picture-card .el-upload-list__item .el-icon-check,
  .el-upload-list--picture-card .el-upload-list__item .el-icon-circle-check {
    position: absolute;
    top: 0;
    left: 14px;
  }
}
.maskvideo {
  .avatar-uploader {
    width: 200px;
    height: 150px;
    border: 1px dashed #fff;
    text-align: center;
    line-height: 150px;
    font-size: 16px;
    color: #fff;
    border-radius: 5px;
    /deep/.avatar-uploader-icon {
      width: 100%;
      height: 100%;
      line-height: normal;
    }
    /deep/.el-upload {
      width: 100%;
      height: 100%;
    }
  }
  .videodiv {
    position: relative;
    width: 200px;
    height: 150px;
  }
  .videoclass {
    width: 200px;
    height: 150px;
  }
  .videoclose {
    color: #fff;
    position: absolute;
    right: -2px;
    top: -2px;
    cursor: pointer;
    z-index: 1000;
  }
}
</style>